<template>
  <div class="bcp-container">
    <!-- 声明组件 -->
    <view-declare />

    <!-- 主要内容区域 -->
    <div class="bcp-content-container">
      <section v-for="(group, type) in groupedPlacements" :key="type" class="ads-section">
        <div class="section-title">{{ type === 'ad' ? '广告' : '资源' }}<svg-icon icon-class="arrow_right" />投放 · 推广</div>
        <div class="ads-location-box">
          <view-position v-for="item in group" :key="item.id" :title="item.title" :imgName="item.imgName"
            :description="item.description" />
        </div>
      </section>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Bcp',
  components: {
    ViewDeclare: () => import('@/components/board-declare'),
    ViewPosition: () => import('./Position')
  },
  computed: {
    // 按类型分组投放位置
    groupedPlacements() {
      const groups = {
        ad: [],
        resource: []
      };

      this.placements.forEach(placement => {
        groups[placement.type].push(placement);
      });

      return groups;
    }
  },
  data() {
    // 初始化投放位置数据
    const placements = [
      {
        type: 'ad',
        id: 1,
        title: '① 首页',
        imgName: 'ads_1.png',
        description: '红框位置可投放广告'
      },
      {
        type: 'ad',
        id: 2,
        title: '② 详情页',
        imgName: 'ads_2.png',
        description: '红框位置可投放广告'
      },
      {
        type: 'ad',
        id: 3,
        title: '③ 个人中心',
        imgName: 'ads_3.png',
        description: '红框位置可投放广告'
      },
      {
        type: 'ad',
        id: 4,
        title: '④ 个人中心 · 快捷投放 · 广告',
        imgName: 'ads_4.png',
        description: '快捷投放入口'
      },
      {
        type: 'resource',
        id: 5,
        title: '① 热门资源【＋入驻】',
        imgName: 'r_1.png',
        description: '投放及展示素材，可自定义修改，可添加自定义链接。'
      },
      {
        type: 'resource',
        id: 6,
        title: '② 个人中心 · 快捷投放 · 资源',
        imgName: 'r_2.png',
        description: '快捷投放入口'
      }
    ];

    return {
      server: sa.$sys.getCurSer(),
      placements
    };
  }
}
</script>

<style lang="scss" scoped>
// 基础样式
@import '@/styles/mixin.scss';

// 页面容器
.bcp-container {
  @include flex-column;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #f8f9fa, #ffffff);
  gap: 16px;
}

.svg-icon {
  margin: 0 0.5rem;
  color: #6c757d;
}

.bcp-content-container {
  flex: 1 1 auto;
  overflow-y: auto;
  width: 100%;
  max-width: 1400px;
  gap: 16px;
}

.ads-section {
  width: 100%;
  margin-bottom: 2.5rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;

  .section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.5rem;
      bottom: 0.5rem;
      width: 4px;
      background-color: #409EFF;
      border-radius: 2px;
    }
  }
}

.ads-location-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Responsive styles */
@media (max-width: 1024px) {
  .bcp-container {
    padding: 0.75rem;
  }

  .bcp-header-container {
    padding: 1rem;
  }

  .bcp-content-container {
    padding: 1rem;
  }

  .section-title {
    font-size: 1.1rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 0.4rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.3rem;
      bottom: 0.3rem;
      width: 3px;
      background-color: #409EFF;
      border-radius: 2px;
    }
  }

  .header-box {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .ads-location-box {
    flex-direction: column;
    gap: 1.5rem;
  }

  .bcp-container {
    padding: 0.5rem;
  }

  .bcp-header-container {
    padding: 0.75rem;
  }

  .bcp-content-container {
    padding: 0.75rem;
  }

  .section-title {
    font-size: 1rem;
    margin: 1rem 0 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 0.3rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.2rem;
      bottom: 0.2rem;
      width: 2px;
      background-color: #409EFF;
      border-radius: 1px;
    }
  }

  .header-box {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .bcp-container {
    padding: 0.25rem;
  }

  .bcp-header-container {
    padding: 0.5rem;
  }

  .bcp-content-container {
    padding: 0.5rem;
  }

  .section-title {
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 0.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.1rem;
      bottom: 0.1rem;
      width: 2px;
      background-color: #409EFF;
      border-radius: 1px;
    }
  }

  .header-box {
    font-size: 0.9rem;
  }

  .ads-location-box {
    gap: 1rem;
  }
}
</style>
